import './index.css'
import { Tabs } from 'antd-mobile'
import { useTabs } from './useTabs'
import HomeList from './HomeList'

const Home = () => {
  const { channels } = useTabs()

  return (
    <div>
      <div className="tabContainer">
        <Tabs defaultActiveKey={'0'}>
          {channels.map((item) => {
            return (
              <Tabs.Tab title={item.name} key={item.id}>
                <div className="listContainer">
                  <HomeList channelId={String(item.id)} />
                </div>
              </Tabs.Tab>
            )
          })}
        </Tabs>
      </div>
    </div>
  )
}

export default Home
